<template>
  <van-tabbar
    v-model="active"
    active-color="#FFCC00"
    inactive-color="#646464"
    :border="false"
    route
    @change="onChange"
  >
    <van-tabbar-item name="首页" icon="wap-home-o" to="/home"
      >标签</van-tabbar-item
    >
    <van-tabbar-item name="分类" icon="apps-o" to="/classify"
      >分类</van-tabbar-item
    >
    <van-tabbar-item name="菜谱" icon="other-pay" to="/recipe"
      >菜谱</van-tabbar-item
    >
    <van-tabbar-item name="购物车" icon="shopping-cart-o" to="/cart"
      >购物车</van-tabbar-item
    >
    <van-tabbar-item name="我的" icon="user-o" to="/mine">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  name: "footer-tabbar",
  data() {
    return {
      active: "首页",
    };
  },
  methods: {
    onChange(active) {
      this.active = active;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  font-size: 22px;
  box-sizing: border-box;
}
.van-tabbar {
  z-index: 999;
  height: 98px;
  ::v-deep .van-icon {
    font-size: 53px;
  }
}
</style>
